<nz-row [nzGutter]="16">
  <nz-col [nzMd]="24">
    <nz-row style="height: 60px;" [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
      <nz-col [nzSpan]="24">
        <form nz-form [formGroup]="validateForm" [nzLayout]="'inline'">
          <!-- <nz-form-item>
            <nz-form-label>帐号</nz-form-label>
            <nz-form-control>
              <input nz-input nzSize="default" [placeholder]="'请输入'" formControlName="account">
            </nz-form-control>
          </nz-form-item> -->
          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="showModify()">{{'modify.text.add' | translate}}</button>
            </nz-form-control>
          </nz-form-item>
          <!-- <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="search()">
                <i class="anticon anticon-search"></i>
                {{'list.text.search' | translate}}
              </button>
            </nz-form-control>
          </nz-form-item> -->
          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="refresh()">
                <i class="anticon anticon-sync"></i>
              </button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-table #nzTable
      nzSize="middle"
      [nzData]="data"
      nzFrontPagination="false"
      nzShowSizeChanger="true"
      nzShowQuickJumper="true"
      [nzLoading]="_loading"
      [(nzPageIndex)]="page.pageNo"
      [(nzPageSize)]="page.pageSize"
      [nzTotal]="page.total"
      (nzPageIndexChange)="getAllUsers()"
      (nzPageSizeChange)="getAllUsers(true)"
      [nzShowTotal]="pagination"
      >
        <thead>
          <tr>
            <th>
              <span>账号</span>
            </th>
            <th>
              <span>性别</span>
            </th>
            <th>
              <span>角色</span>
            </th>
            <th>
              <span>电话</span>
            </th>
            <th>
              <span>邮箱</span>
            </th>
            <th>
              <span>操作</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of nzTable.data">
            <td>{{data.account}}</td>
            <td>
              <span *ngIf="data.gender==0">男</span>
              <span *ngIf="data.gender==1">女</span>
            </td>
            <td>{{data.roles}}</td>
            <td>{{data.phone}}</td>
            <td>{{data.email}}</td>
            <td>
              <a (click)="showModify(data)">{{'modify.text.edit' | translate}}</a>
              <nz-divider nzType="vertical"></nz-divider>
              <nz-popconfirm [nzTitle]="'modify.text.delete_tip'|translate" (nzOnConfirm)="delete(data.id)" [nzPlacement]="'top'">
                <a nz-popconfirm>{{'modify.text.delete' | translate}}</a>
              </nz-popconfirm>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <ng-template #pagination>
        {{'list.text.pagination' | translate}} {{page.total}} {{'list.text.article' | translate}}
      </ng-template>
    </nz-row>
  </nz-col>
</nz-row>
